<template>
  <div class="file-view flex flex-col h-full">
    <div class="flex-grow overflow-hidden">
      <!-- 操作栏 -->
      <OperationBar
        class="animate-fade-in"
        :currentPath="currentPath"
        :selectedFiles="selectedFiles"
        :fileType="fileType"
        :viewMode="fileStore.viewMode"
        :isSelectionMode="isSelectionMode"
        @refresh="refreshFiles"
        @viewModeChange="handleViewModeChange"
        @selectionModeChange="handleSelectionModeChange"
        @openUploadDialog="openUploadDialog"
        @openCreateFolderDialog="openCreateFolderDialog"
        @search="handleSearch"
        @batchDelete="handleBatchDelete"
        @batchMove="openMoveDialog"
        @batchCopy="openCopyDialog"
        @shareFiles="openShareDialog"
        @batchDownload="handleBatchDownload"
      />
      <!-- 面包屑 -->
      <BreadCrumb
        class="animate-fade-in"
        style="animation-delay: 0.1s"
        :currentPath="currentPath"
        :fileType="fileType"
        @pathChange="handlePathChange"
      />
      <!-- 文件列表容器 -->
      <div class="file-list-container overflow-auto">
        <FileTable
          v-if="fileStore.viewMode === 'table'"
          :key="'table-' + fileStore.viewMode"
          :fileList="fileList"
          :currentPath="currentPath"
          @refresh="refreshFiles"
          @fileClick="handleFileClick"
          @selectionChange="handleSelectionChange"
          @openRenameDialog="openRenameDialog"
          @moveFile="openMoveDialog"
          @copyFile="openCopyDialog"
          @deleteFile="handleDeleteFile"
          @shareFiles="openShareDialog"
          @openFileInfo="openFileInfo"
        />
        <FileGrid
          v-else
          :key="'grid-' + fileStore.viewMode"
          :fileList="fileList"
          :isSelectionMode="isSelectionMode"
          @refresh="refreshFiles"
          @fileClick="handleFileClick"
          @selectionChange="handleSelectionChange"
        />
      </div>
    </div>
    <!-- 分页区域 -->
    <div class="pagination-container border-t border-gray-200 py-4 animate-fade-in" style="animation-delay: 0.2s">
      <div class="pagination-wrapper">
        <span class="total-info">共 {{ total }} 条</span>
      </div>
    </div>

    <!-- 上传文件弹窗 -->
    <el-dialog 
      v-model="uploadDialogVisible" 
      title="上传文件" 
      width="50%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <FileUpload
        :currentPath="currentPath"
        @upload-success="handleUploadSuccess"
      />
    </el-dialog>

    <!-- 新建文件夹弹窗 -->
    <el-dialog
      v-model="createFolderDialogVisible"
      title="新建文件夹"
      width="30%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <el-form :model="folderForm" label-width="80px">
        <el-form-item label="文件夹名">
          <el-input
            v-model="folderForm.folderName"
            placeholder="请输入文件夹名"
            class="input-focus"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createFolderDialogVisible = false" class="btn-hover">取消</el-button>
          <el-button type="primary" @click="handleCreateFolder" class="btn-hover">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 移动文件弹窗 -->
    <el-dialog 
      v-model="moveDialogVisible" 
      title="移动文件" 
      width="50%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <el-form :model="moveForm" label-width="80px">
        <el-form-item label="当前路径">
          <el-input v-model="moveForm.sourcePath" disabled></el-input>
        </el-form-item>
        <el-form-item label="目标路径">
          <el-input
            v-model="moveForm.targetPath"
            placeholder="请选择目标路径"
            readonly
            class="input-focus"
          ></el-input>
        </el-form-item>
      </el-form>
      <FolderTree @select="handleFolderSelect" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="banch" class="btn-hover">取消</el-button>
          <el-button type="primary" @click="handleBatchMove" class="btn-hover">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 复制文件弹窗 -->
    <el-dialog 
      v-model="CopyDialogVisible" 
      title="复制文件" 
      width="50%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <el-form :model="moveForm" label-width="80px">
        <el-form-item label="当前路径">
          <el-input v-model="moveForm.sourcePath" disabled></el-input>
        </el-form-item>
        <el-form-item label="目标路径">
          <el-input
            v-model="moveForm.targetPath"
            placeholder="请选择目标路径"
            readonly
            class="input-focus"
          ></el-input>
        </el-form-item>
      </el-form>
      <FolderTree @select="handleFolderSelect" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="copy" class="btn-hover">取消</el-button>
          <el-button type="primary" @click="handleBatchCopy" class="btn-hover">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分享文件弹窗 -->
    <el-dialog 
      v-model="shareDialogVisible" 
      title="分享文件" 
      width="30%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <el-form :model="shareForm" label-width="100px">
        <el-form-item label="分享名称">
          <el-input
            v-model="shareForm.shareName"
            placeholder="请输入分享名称"
            class="input-focus"
          ></el-input>
        </el-form-item>
        <el-form-item label="分享类型">
          <el-select 
            v-model="shareForm.shareType" 
            placeholder="请选择分享类型"
            class="input-focus"
          >
            <el-option :value="no_code" label="公开分享"></el-option>
            <el-option :value="need_code" label="私密分享"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期">
          <el-select
            v-model="shareForm.shareDayType"
            placeholder="请选择有效期"
            class="input-focus"
          >
            <el-option :value="0" label="永久有效"></el-option>
            <el-option :value="1" label="7天"></el-option>
            <el-option :value="2" label="30天"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shareDialogVisible = false" class="btn-hover">取消</el-button>
          <el-button type="primary" @click="handleCreateShare" class="btn-hover">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分享结果弹窗 -->
    <el-dialog 
      v-model="shareResultDialogVisible" 
      title="分享成功" 
      width="40%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <el-form label-width="100px">
        <el-form-item label="分享链接：">
          <el-input v-model="shareUrl" readonly class="input-focus">
            <template #append>
              <el-button @click="copyToClipboard(shareUrl)" class="btn-hover">复制</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="shareResult.shareCode" label="分享码：">
          <el-input v-model="shareResult.shareCode" readonly class="input-focus">
            <template #append>
              <el-button @click="copyToClipboard(shareResult.shareCode)" class="btn-hover">复制</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shareResultDialogVisible = false" class="btn-hover">关闭</el-button>
          <el-button type="primary" @click="copyAllShareInfo" class="btn-hover">复制全部信息</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 重命名弹窗 -->
    <el-dialog 
      v-model="renameDialogVisible" 
      title="重命名" 
      width="30%"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    >
      <el-form :model="renameForm" label-width="80px">
        <el-form-item label="新名称">
          <el-input
            v-model="renameForm.newFileName"
            placeholder="请输入新名称"
            class="input-focus"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="renameDialogVisible = false" class="btn-hover">取消</el-button>
          <el-button type="primary" @click="handleRename" class="btn-hover">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 文件详情弹窗 -->
    <FileInfo 
      v-model="fileInfoDialogVisible" 
      :fileInfo="fileInfo"
      :enter-animation="dialogEnterAnim"
      :leave-animation="dialogLeaveAnim"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { useLoginUserStore } from "@/store/user";
import { ElLoading, ElMessage } from "element-plus";
import FileTable from "../../components/file/FileTable.vue";
import FileGrid from "../../components/file/FileGrid.vue";
import BreadCrumb from "../../components/file/BreadCrumb.vue";
import OperationBar from "../../components/file/OperationBar.vue";
import FileUpload from "../../components/file/FileUpload.vue";
import {
  searchFilesByName,
  listFiles,
  createFolder,
  delFiles,
  moveFiles,
  copyFiles,
  renameFile,
  preview,
  downloadUrlParam,
  downloadFiles,
} from "@/api/file";
import { useFileStore } from "@/store/file";
import FolderTree from "../../components/file/FolderTree.vue";
import { createShare } from "@/api/share";
import FileInfo from "../../components/file/FileInfo.vue";
import { useStorageStore } from "@/store/storage";

const props = defineProps<{
  fileType: number | null;
}>();

const fileStore = useFileStore();
const no_code = ref("no_code");
const need_code = ref("need_code");
const fileList = ref<API.FileDTO[]>([]);
const currentPage = ref(1);
const { loginUser } = useLoginUserStore();
const parent_id = ref(localStorage.getItem("parent_id"));
const pageSize = ref(10);
const total = ref(0);
const currentPath = ref("/");
const fileType = ref<number | undefined>(undefined);
const isSelectionMode = ref(false);
const selectedFiles = ref<API.FileDTO[]>([]);
const uploadDialogVisible = ref(false);
const searchQuery = ref("");
const createFolderDialogVisible = ref(false);
const accountNo = loginUser.id;
import { useFileStores } from "@/store/filePath";

const { filePaths } = useFileStores();
const shareUrl = ref("");

const folderForm = ref({
  folderName: "",
});
const moveDialogVisible = ref(false);
const CopyDialogVisible = ref(false);
const moveForm = ref({
  sourcePath: "",
  targetPath: "",
  targetParentId: "",
});
const shareDialogVisible = ref(false);
const shareResultDialogVisible = ref(false);
const shareForm = ref({
  shareName: "",
  shareType: "no_code",
  shareDayType: 0,
});
const shareResult = ref<API.ShareUrlDTO>({});

const renameDialogVisible = ref(false);
const renameForm = ref({
  fileId: undefined as string | undefined,
  accountNo: loginUser.id,
  newFileName: "",
});

const fileInfoDialogVisible = ref(false);
const fileInfo = ref<API.FileDTO>({});

const storageStore = useStorageStore();

// 弹窗动画配置
const dialogEnterAnim = {
  enterFrom: { opacity: 0, transform: "translateY(20px)" },
  enterActive: { opacity: 1, transform: "translateY(0)", transition: { duration: 0.3 } }
};
const dialogLeaveAnim = {
  leaveActive: { opacity: 0, transform: "translateY(20px)", transition: { duration: 0.3 } }
};

/**
 * 根据条件查询文件列表
 */
async function searchFiles() {
  try {
    const response = await searchFilesByName({
      search: searchQuery.value,
    });

    if (!response.data) {
      ElMessage.error("API 响应为空");
      return;
    }

    if (!response.data.success) {
      ElMessage.error(response.data.msg || "API 请求失败");
      return;
    }

    if (!response.data.data || !Array.isArray(response.data.data)) {
      ElMessage.error("API 数据格式不正确");
      return;
    }

    fileList.value = response.data.data.map((file: API.FileDTO) => ({
      ...file,
      fileSuffix: file.isDir === 1 ? "folder" : file.fileSuffix || "other",
      fileType: file.isDir === 1 ? "folder" : file.fileType || "other",
    }));

    total.value = response.data.data.length || 0;
  } catch (error) {
    console.error("获取文件列表出错:", error);
    if (error instanceof Error) {
      ElMessage.error(`获取文件列表失败: ${error.message}`);
    } else {
      ElMessage.error("获取文件列表失败");
    }
  }
}

/**
 * 获取文件列表
 */
async function fetchFiles() {
  try {
    const response = await listFiles({
      parent_id: parent_id.value,
    });

    if (!response.data) {
      ElMessage.error("API 响应为空");
      return;
    }

    if (!response.data.success) {
      ElMessage.error(response.data.msg || "API 请求失败");
      return;
    }

    if (!response.data.data || !Array.isArray(response.data.data)) {
      ElMessage.error("API 数据格式不正确");
      return;
    }

    fileList.value = response.data.data.map((file: API.FileDTO) => ({
      ...file,
      fileSuffix: file.isDir === 1 ? "folder" : file.fileSuffix || "other",
      fileType: file.isDir === 1 ? "folder" : file.fileType || "other",
    }));

    total.value = response.data.data.length || 0;
  } catch (error) {
    console.error("获取文件列表出错:", error);
    if (error instanceof Error) {
      ElMessage.error(`获取文件列表失败: ${error.message}`);
    } else {
      ElMessage.error("获取文件列表失败");
    }
  }
}

onMounted(() => {
  fetchFiles();
});

const refreshFiles = () => {
  fetchFiles();
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchFiles();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchFiles();
};

/**
 * 点击文件夹
 */
const handleFileClick = (file: API.FileDTO) => {
  if (file.isDir === 1) {
    currentPath.value =
      currentPath.value === "/"
        ? `/${file.fileName}/`
        : `${currentPath.value}${file.fileName}/`;
    parent_id.value = String(file.id);
    currentPage.value = 1;
    fetchFiles();
  } else {
    console.log("File clicked:", file);
  }
};

const handlePathChange = (newPath: string, ID: string) => {
  currentPath.value = newPath;
  parent_id.value = ID;
  currentPage.value = 1;
  const startIndex = filePaths.indexOf(ID);
  if (startIndex !== -1) {
    useFileStores().filePaths = filePaths.slice(0, startIndex);
  }
  fetchFiles();
};

/**
 * 切换视图模式
 */
const handleViewModeChange = (newMode: "table" | "grid") => {
  fileStore.setViewMode(newMode);
  isSelectionMode.value = false;
  selectedFiles.value = [];
};

const handleSelectionModeChange = (mode: boolean) => {
  isSelectionMode.value = mode;
  if (!mode) {
    selectedFiles.value = [];
  }
};

const handleSelectionChange = (selection: API.FileDTO[]) => {
  selectedFiles.value = selection;
  isSelectionMode.value = selection.length > 0;
};

const startRecord = computed(() => {
  return (currentPage.value - 1) * pageSize.value + 1;
});

const endRecord = computed(() => {
  return Math.min(currentPage.value * pageSize.value, total.value);
});

watch(
  () => props.fileType,
  (newFileType) => {
    fileType.value = newFileType ?? undefined;
    currentPath.value = "/";
    currentPage.value = 1;
    fetchFiles();
  },
  { immediate: true }
);

const openUploadDialog = () => {
  uploadDialogVisible.value = true;
};

const handleUploadSuccess = ({ file, path }: { file: any; path: string }) => {
  refreshFiles();
  storageStore.updateStorageInfo();
};

const handleSearch = (query: string) => {
  searchQuery.value = query;
  currentPage.value = 1;
  if (searchQuery.value == null || searchQuery.value == "") {
    fetchFiles();
  } else {
    searchFiles();
  }
};

const openCreateFolderDialog = () => {
  createFolderDialogVisible.value = true;
};

const handleCreateFolder = async () => {
  if (!folderForm.value.folderName) {
    ElMessage.warning("请输入文件夹名");
    return;
  }
  try {
    const response = await createFolder({
      folderName: folderForm.value.folderName,
      parentId: String(parent_id.value),
      accountNo: accountNo,
    });
    if (response.data && response.data.success) {
      ElMessage.success("文件夹创建成功");
      createFolderDialogVisible.value = false;
      folderForm.value.folderName = "";
      refreshFiles();
    } else {
      ElMessage.error(response.data?.msg || "创建文件夹失败");
    }
  } catch (error) {
    console.error("创建文件夹出错:", error);
    ElMessage.error("创建文件夹失败");
  }
};

/**
 * 批量下载
 */
const handleBatchDownload = async (filesToDownload: API.FileDTO[]) => {
  try {
    const fileIds = filesToDownload.map((file) => String(file.id));

    if (fileIds.length > 1 || filesToDownload[0].isDir == 1) {
      const response = await downloadFiles({
        fileIds,
        accountNo,
      });
      const blob = response.data;
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "download.zip";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } else {
      const response = await downloadUrlParam({
        fileIds,
      });
      if (response.data && response.data.success) {
        const downloadUrls = response.data.data;
        for (let i = 0; i < downloadUrls.length; i++) {
          fetch(downloadUrls[i].downloadUrl)
            .then((response) => response.blob())
            .then((blob) => {
              const link = document.createElement("a");
              const url = URL.createObjectURL(blob);
              link.href = url;
              link.download = String(downloadUrls[i].fileName);
              document.body.appendChild(link);
              link.click();
              window.URL.revokeObjectURL(url);
              document.body.removeChild(link);
            });
        }
      }
    }
  } catch (error) {
    console.error("下载文件出错:", error);
    ElMessage.error("下载文件失败");
  }
};

const handleBatchDelete = async (filesToDelete: API.FileDTO[]) => {
  try {
    const fileIds = filesToDelete.map((file) => String(file.id));
    const requestBody = { accountNo, fileIds };
    const response = await delFiles(requestBody);

    if (response.data && response.data.success) {
      ElMessage.success("文件删除成功");
      refreshFiles();
      isSelectionMode.value = false;
      selectedFiles.value = [];
      storageStore.updateStorageInfo();
    } else {
      ElMessage.error(response.data?.msg || "删除文件失败");
    }
  } catch (error) {
    console.error("删除文件出错:", error);
    ElMessage.error("删除文件失败");
  }
};
const openMoveDialog = (filesToMove: API.FileDTO[], sourcePath: string) => {
  moveDialogVisible.value = true;
  selectedFiles.value = filesToMove;
  moveForm.value.sourcePath = sourcePath;
  moveForm.value.targetPath = sourcePath;
};

const openCopyDialog = (filesToMove: API.FileDTO[], sourcePath: string) => {
  CopyDialogVisible.value = true;
  selectedFiles.value = filesToMove;
  moveForm.value.sourcePath = sourcePath;
  moveForm.value.targetPath = sourcePath;
};

const copy = async () => {
  CopyDialogVisible.value = false;
};

const handleBatchCopy = async () => {
  if (!moveForm.value.targetPath) {
    ElMessage.warning("请输入目标路径");
    return;
  }

  try {
    const fileIds = selectedFiles.value.map((file) => String(file.id));
    const { filepath } = useFileStores();
    const targetParentId = filepath;
    const response = await copyFiles({
      fileIds,
      accountNo,
      targetParentId,
    });
    if (response.data && response.data.success) {
      ElMessage.success("文件复制成功");
      storageStore.updateStorageInfo();
      CopyDialogVisible.value = false;
      moveForm.value.sourcePath = "";
      moveForm.value.targetPath = "";
    } else {
      ElMessage.error(response.data?.msg || "复制文件失败");
    }
  } catch (error) {
    console.error("复制文件出错:", error);
    ElMessage.error("复制文件失败");
  }
};

const banch = () => {
  moveDialogVisible.value = false;
};

const handleBatchMove = async () => {
  if (!moveForm.value.targetPath) {
    ElMessage.warning("请输入目标路径");
    return;
  }

  try {
    const fileIds = selectedFiles.value.map((file) => String(file.id));
    const { filepath } = useFileStores();
    const targetParentId = filepath;
    const response = await moveFiles({
      fileIds,
      accountNo,
      targetParentId,
    });

    if (response.data && response.data.success) {
      ElMessage.success("文件移动成功");
      moveDialogVisible.value = false;
      moveForm.value.sourcePath = "";
      moveForm.value.targetPath = "";
      refreshFiles();
      isSelectionMode.value = false;
      selectedFiles.value = [];
    } else {
      ElMessage.error(response.data?.msg || "移动文件失败");
    }
  } catch (error) {
    console.error("移动文件出错:", error);
    ElMessage.error("移动文件失败");
  }
};

const handleFolderSelect = (node: API.TreeNodeDTO & { path: string }) => {
  moveForm.value.targetPath = node.path;
  useFileStores().setFilePath(node.id);
};

const openShareDialog = (filesToShare: API.FileDTO[]) => {
  shareDialogVisible.value = true;
  selectedFiles.value = filesToShare;
  shareForm.value.shareName =
    filesToShare.length === 1
      ? filesToShare[0].fileName ?? ""
      : `${filesToShare[0].fileName ?? ""}等${filesToShare.length}个文件`;
};

const handleCreateShare = async () => {
  try {
    const fileIds = selectedFiles.value.map((file) => String(file.id));
    const host = window.location.host;
    const response = await createShare({
      ...shareForm.value,
      fileIds,
      accountNo,
      host,
    });

    if (response.data && response.data.success) {
      shareResult.value = response.data.data as API.ShareUrlDTO;
      shareUrl.value = String(shareResult.value.shareUrl);
      shareDialogVisible.value = false;
      shareResultDialogVisible.value = true;
    } else {
      ElMessage.error(response.data?.msg || "创建分享失败");
    }
  } catch (error) {
    console.error("创建分享出错:", error);
    ElMessage.error("创建分享失败");
  }
};

const copyToClipboard = (text: string | undefined) => {
  if (!text) {
    ElMessage.warning("没有可复制的文本");
    return;
  }

  try {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    textArea.setSelectionRange(0, 99999);
    let successful = document.execCommand("copy");
    document.body.removeChild(textArea);

    if (successful) {
      ElMessage.success("复制成功");
    } else {
      throw new Error("复制失败");
    }
  } catch (err) {
    console.error("Failed to copy text: ", err);
    ElMessage.error("复制失败，请手动复制");
  }
};

const copyAllShareInfo = () => {
  const shareInfo = `${shareResult.value.shareUrl}\n${
    shareResult.value.shareCode ? `分享码：${shareResult.value.shareCode}` : ""
  }`;
  copyToClipboard(shareInfo);
};

// 重命名相关方法
const openRenameDialog = (file: API.FileDTO) => {
  renameDialogVisible.value = true;
  renameForm.value = {
    fileId: file.id,
    newFileName: file.fileName || "",
    accountNo: loginUser.id,
  };
};

const handleRename = async (file: API.FileDTO) => {
  if (!renameForm.value.newFileName) {
    ElMessage.warning("请输入新名称");
    return;
  }

  try {
    const response = await renameFile({
      fileId: renameForm.value.fileId,
      newFileName: renameForm.value.newFileName,
      accountNo: renameForm.value.accountNo,
    });
    if (response.data && response.data.success) {
      ElMessage.success("重命名成功");
      refreshFiles();
      renameDialogVisible.value = false;
    } else {
      ElMessage.error(response.data?.msg || "重命名失败");
    }
  } catch (error) {
    console.error("重命名出错:", error);
    ElMessage.error("重命名失败");
  }
};

// 删除单个文件方法
const handleDeleteFile = async (file: API.FileDTO) => {
  try {
    const requestBody = {
      accountNo,
      fileIds: [String(file.id)],
    };

    const response = await delFiles(requestBody);

    if (response.data && response.data.success) {
      ElMessage.success("文件删除成功");
      refreshFiles();
      storageStore.updateStorageInfo();
    } else {
      ElMessage.error(response.data?.msg || "删除文件失败");
    }
  } catch (error) {
    console.error("删除文件出错:", error);
    ElMessage.error("删除文件失败");
  }
};

// 格式化文件大小
const formatFileSize = (size: number | undefined) => {
  if (size == null) return "-";
  const units = ["B", "KB", "MB", "GB", "TB"];
  let index = 0;
  let sizeNum = size;
  while (sizeNum >= 1024 && index < units.length - 1) {
    sizeNum /= 1024;
    index++;
  }
  return `${sizeNum.toFixed(2)} ${units[index]}`;
};

// 格式化日期时间
const formatDateTime = (timestamp: number | undefined) => {
  if (!timestamp) return "-";
  return new Date(timestamp).toLocaleString();
};

// 打开文件详情
const openFileInfo = (file: API.FileDTO) => {
  fileInfo.value = file;
  fileInfoDialogVisible.value = true;
};
</script>

<style scoped>
/* 基础布局 */
.file-view { height: 100%; display: flex; flex-direction: column; background: #f8fafc; }
.file-list-container { flex-grow: 1; overflow-y: auto; padding: 12px; }
.pagination-container { background: #fff; margin-top: auto; }
.pagination-wrapper { display: flex; justify-content: center; align-items: center; position: relative; }
.total-info { position: absolute; left: 20px; font-size: 14px; color: #64748b; }

/* 动画类 */
.animate-fade-in { animation: fadeIn 0.5s ease forwards; opacity: 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 组件样式增强 */
:deep(.el-pagination) { justify-content: center; padding: 8px 0; }
:deep(.el-dialog__body) { padding: 20px; }
:deep(.el-form-item) { margin-bottom: 16px; }
.input-focus:focus-within { box-shadow: 0 0 0 3px rgba(64,158,255,0.1); }

/* 交互样式 */
.btn-hover { transition: all 0.3s ease; }
.btn-hover:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24,144,255,0.2); }
:deep(.file-grid-item) { transition: all 0.3s ease; }
:deep(.file-grid-item:hover) { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
:deep(.file-table-row:hover) { background: #f5f7fa; }
:deep(.el-select:focus-within), :deep(.el-input:focus-within) { border-color: #1890ff; }

/* 响应式适配 - 平板 */
@media (max-width: 968px) {
  .file-list-container { padding: 8px; }
  :deep(.el-button) { padding: 8px 12px; font-size: 13px; }
  :deep(.el-dialog) { width: 70% !important; }
  :deep(.file-table-col-file-size), :deep(.file-table-col-update-time) { display: none; }
  .total-info { font-size: 13px; left: 12px; }
}

/* 响应式适配 - 手机 */
@media (max-width: 576px) {
  :deep(.operation-bar) { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  :deep(.bread-crumb) { padding: 8px 12px; font-size: 13px; }
  :deep(.file-grid) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  :deep(.el-dialog) { width: 92% !important; }
  :deep(.el-dialog__header) { padding: 16px 20px; }
  :deep(.el-dialog__footer) { padding: 12px 20px; }
  .pagination-wrapper { flex-direction: column; gap: 8px; }
  .total-info { position: static; margin-bottom: 8px; }
  :deep(.file-table-col-file-type) { display: none; }
}
</style>